<template>
    <fieldset>
         <!-- 内容页面 -->
        <legend>{{isLogin?'内容界面':'登入界面'}}</legend>
        <div class="content" v-if="isLogin" >
            <h1>列表展示</h1>
            <button @click="isLogin=false">点击退出登录</button>
            <button @click="getList">点击获取列表</button>
            <h2>
                <img :src="userInfo.headimgurl" width="50">
               
                昵称:<a href="">{{userInfo.nickname}}</a>
                
                
            </h2>
            <ul>
                <li v-for="item in lists" :key="item._id">
                    <b>{{item.name}}</b>
                    <button v-has:read="permissionBtns">查看</button>
                    <button v-has:edit="permissionBtns">修改</button>
                    <button v-has:add="permissionBtns">增加</button>
                    <button v-has:delete="permissionBtns">删除</button>
                </li>
            </ul>

        </div>

        <!-- 登入页面 -->
        
        <div class="login" v-else >
            <h1>请登入</h1>
            <label for="username">用户名：</label>
            <input type="text" v-model="username">
            <br>
            <label for="password">密码：</label>
            <input type="text" v-model="password" @keydown.enter="login">
            <br>
            <button @click="login">登入</button>

        </div>

    
        
    </fieldset>
</template>
<script src='http://chst.vip:8081/vue.js'></script>
<script>
    // 封装登入请求
    let loginApi=(params={})=>{
        return fetch('http://chst.vip/users/login',{
            // 请求方式
            method:'post',
            headers:{
                'content-type':'application/json'
            },
            body:JSON.stringify(params)

        })
        .then(body=>body.json())
        .catch(err=>err.toString())

    }

    // 封装获取列表
    let getListApi=()=>{
        return fetch('http://chst.vip/students/getstulist?count=10',{
            method:"get",
            headers:{
                'authorization':sessionStorage.getItem("user-token")
            }

        })
        .then(body=>body.json())
        .catch(err=>err.toString())
    }



    export default{
        directives:{
            has:{
                inserted(el,binding){
                console.log(binding)
                // 按钮权限
                let role= binding.arg;
                // 用户权限
                let userRole=binding.value;
                let hasRole = userRole.includes(role);
                if(!hasRole){
                    el.parentNode.removeChild(el)
                }
            }

            }
        },
        data(){
            return{
                isLogin:false,
                username:"",
                password:"",
                // 收集用户信息
                userInfo:{},
                lists:[],
                permissionBtns:[]


            }
        },
        methods:{
            // 登入
         async login(){
                let res=await loginApi({username:this.username,password:this.password});
                console.log(res);
                if(res.state){
                    // 登录成功 页面跳转
                    this.isLogin=true,

                    // 设置用户信息
                    this.userInfo=res.userInfo
                    // 将用户令牌存到本地
                    sessionStorage.setItem('user-token',res.
                    token)

                    this.permissionBtns=res.permission.buttons;
                    
                    
                }else{
                    alert(res.msg)
                }

          },

         async getList(){
            let res =await getListApi()

            // 
             if(res.state){
                // 请求成功
                this.lists=res.data
             } else{
                alert(res.msg)
             }
         },
        

          
        }

    }


</script>
<style scoped>
     ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    li {
        /* border: 1px solid deeppink; */
        margin: 10px;
        max-width: 500px;
    }
</style>
